<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p></p>
    <button onclick="setnum()">买买买</button>
    <script>
        let obj = {
            name:'张三',
            age:16
        }
        obj.name = 456
        obj.cc = 666

        // Object.defineProperty(对象，属性名，描述)

        // Object.defineProperty(obj,"dd",{
        //     value:999,
        //     // 不能删除
        //     configurable:false,
        //     // 只读
        //     writable:false
        // })

        // 删除对象中属性 delete

        Object.defineProperty(obj,"age",{
           
            get(){ //获取器
                return age
                // console.log(age);
                
            },
            set(value){
                console.log(value,'set');
            //   this.age = value
              
                
            }
        })

        console.log(obj,'45');



        let obj2 = {
            name:''
        }
        let n = ''
        Object.defineProperty(obj2,'name',{
            get(){
                console.log();
                return n
            },
            set(newval){
                console.log(newval,'name变了');
                n=newval
            }
        })

        // obj2.name = '666'
        console.log(obj2);
        










        let obj3 = {
            name:'牛奶',
            price:15,
            num:1,
        }
        function setnum(){
            obj3.num++
        }
        let num =1
        Object.defineProperty(obj3,'num',{
            get(){
                return num
            },
            set(val){
                console.log(val,'数量变了');
                num = val
                setdom()
            }
        })
        function setdom(){
            let p = document.querySelector('p')
            p.innerHTML = `${obj3.name}价值￥${obj3.price*obj3.num}元`    
        }
        setdom()
        
    </script>
</body>
</html>